{% extends "layout/content.twig" %}

{% block main %}
    <div class="layui-card" id="main-visible-area">

        <div class="layui-card-header">
            {{ page_title }}
        </div>

        <div class="layui-card-body">

            {% if alerts %}
                {% for alert in alerts %}
                    <div class="alert alert-{{ alert.type }}{% if alert.light %}-light{% endif %}">
                        {{ alert.text }}
                    </div>
                {% endfor %}
            {% endif %}

            {% include "public/query.twig" %}

            <div class="mt5">
                <table class="layui-hide" id="page-table-render" lay-filter="page-table-render">
                </table>
            </div>

        </div>
    </div>
    <template id="toolbar">
        <div class="layui-table-tool-temp">

            <button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="__reload__">
                <i class="iconfont icon-shuaxin1"></i>
            </button>

            {% include "public/toolbar.twig" %}

        </div>
    </template>

{% endblock %}

{% block script %}
    <script type="text/javascript">

        const builder_page_config = {
            route: null,
            columns: null,
            right_toolbars: null,
        }

        layui.use(['page'], function () {
            let page = layui.page
            try {
                builder_page_config.route = JSON.parse('{{ resource_route|json_encode(constant('JSON_HEX_QUOT'))|e('js') }}')
                builder_page_config.columns = JSON.parse('{{ columns|json_encode(constant('JSON_HEX_QUOT'))|e('js') }}')
                builder_page_config.right_toolbars = JSON.parse('{{ right_toolbars|json_encode(constant('JSON_HEX_QUOT'))|e('js') }}')
                page.table(builder_page_config)
            } catch (e) {
                console.log(e)
            }
        })
    </script>
{% endblock %}